<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><c:choose><c:when test="${article != null}">编辑文章</c:when><c:otherwise>发布文章</c:otherwise></c:choose> - 博客系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- 引入CKEditor富文本编辑器 -->
    <script src="https://cdn.ckeditor.com/4.16.2/standard/ckeditor.js"></script>
</head>
<body>
<!-- 导航栏省略 -->

<div class="container mt-4">
    <div class="row">
        <div class="col-md-10 offset-md-1">
            <div class="card">
                <div class="card-header">
                    <h4>
                        <c:choose>
                            <c:when test="${article != null}">编辑文章</c:when>
                            <c:otherwise>发布文章</c:otherwise>
                        </c:choose>
                    </h4>
                </div>
                <div class="card-body">
                    <!-- 错误提示 -->
                    <c:if test="${not empty errorMsg}">
                        <div class="alert alert-danger">${errorMsg}</div>
                    </c:if>

                    <!-- 文章表单 -->
                    <form action="${pageContext.request.contextPath}/article/edit" method="post">
                        <!-- 文章ID（编辑时需要） -->
                        <c:if test="${article != null}">
                            <input type="hidden" name="id" value="${article.id}">
                        </c:if>

                        <div class="mb-3">
                            <label for="title" class="form-label">文章标题</label>
                            <input type="text" class="form-control" id="title" name="title"
                                   value="${article != null ? article.title : ''}" required>
                        </div>

                        <div class="mb-3">
                            <label for="categoryId" class="form-label">文章分类</label>
                            <select class="form-select" id="categoryId" name="categoryId" required>
                                <c:forEach items="${categoryList}" var="category">
                                    <option value="${category.id}"
                                            <c:if test="${article != null && article.categoryId == category.id}">selected</c:if>>
                                            ${category.name}
                                    </option>
                                </c:forEach>
                            </select>
                        </div>

                        <div class="mb-3">
                            <label for="content" class="form-label">文章内容</label>
                            <textarea class="form-control" id="content" name="content" rows="15" required>
                                ${article != null ? article.content : ''}
                            </textarea>
                        </div>

                        <div class="mb-3">
                            <label class="form-check-label">发布状态</label>
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="isPublished" id="publish"
                                       value="1" <c:if test="${article == null || article.isPublished == 1}">checked</c:if>>
                                <label class="form-check-label" for="publish">
                                    发布
                                </label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="isPublished" id="draft"
                                       value="0" <c:if test="${article != null && article.isPublished == 0}">checked</c:if>>
                                <label class="form-check-label" for="draft">
                                    保存为草稿
                                </label>
                            </div>
                        </div>

                        <div class="d-flex justify-content-between">
                            <button type="submit" class="btn btn-primary">保存</button>
                            <a href="${pageContext.request.contextPath}/articles" class="btn btn-outline-secondary">取消</a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
    // 初始化CKEditor富文本编辑器
    CKEDITOR.replace('content', {
        // 配置编辑器高度
        height: 400,
        // 简化工具栏
        toolbar: [
            { name: 'document', items: [ 'Source', '-', 'Save', 'NewPage', 'Preview', 'Print', '-', 'Templates' ] },
            { name: 'clipboard', items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] },
            { name: 'editing', items: [ 'Find', 'Replace', '-', 'SelectAll', '-', 'Scayt' ] },
            '/',
            { name: 'basicstyles', items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat' ] },
            { name: 'paragraph', items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl', 'Language' ] },
            { name: 'links', items: [ 'Link', 'Unlink', 'Anchor' ] },
            { name: 'insert', items: [ 'Image', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak', 'Iframe' ] },
            '/',
            { name: 'styles', items: [ 'Styles', 'Format', 'Font', 'FontSize' ] },
            { name: 'colors', items: [ 'TextColor', 'BGColor' ] },
            { name: 'tools', items: [ 'Maximize', 'ShowBlocks' ] },
            { name: 'about', items: [ 'About' ] }
        ]
    });
</script>
</body>
</html>